//  .jsx -> .tsx
// App <- hello
// 父组件会向子组件提供props  jsx的输出
// 子组件打工的 通过prop-types 拒绝裸奔
// 面向对象中 特性 父子组件的间的约定 负责？
// interface 接口
import * as React from 'react'
// 定义一个接口 父子组件间使用
// 子组件需要实现Props 规定的接口属性和方法
// ts 语法能力 面向对象的能力更牛逼
// ts 可以让我们像java一样
// ts 内置的 interface 
// 接口定义区域
interface Props{
    userName:string;
    userAge:number;
}
// 接口和组件结合 组件要实现这个接口
// props ? { }空对象
// 用泛型 
// React.FC 类型定义由@types/react
const HelloComponents:React.FC<Props> =(props)=>{
    return(
        <h2>
            hello user:{props.userName}!
            <br />
            age:{props.userAge}
        </h2>
    )
}

export default HelloComponents